<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../../../static/third/editormd/css/editormd.css" th:href="@{/third/editormd/css/editormd.css}">
    <link rel="stylesheet" href="../../../static/third/editormd/css/editormd.preview.css" th:href="@{/third/editormd/css/editormd.preview.css}">
    <link rel="stylesheet" href="../../../static/third/layui/css/layui.css" th:href="@{/third/layui/css/layui.css}">



</head>
<body>
<form  class="layui-form" action="" th:action="@{/admin/article/update}" method="post">
       <div class="layui-container">
           <div class="layui-form-item">
               <!--隐藏提交ID -->
               <input type="hidden" name="articleId" th:value="${articleInfo.articleId}">
               <div class="layui-inline">
                   <label class="layui-form-label">文章分类</label>
                   <div class="layui-input-inline">
                       <!--判断哪个和它相等-->
                       <select name="categoryId" lay-filter="categoryId">
                           <option value=""></option>
                           <option value="" th:each="obj:${categories}" th:value="${obj.categoryId}" th:text="${obj.name}"
                                  th:if="${obj.categoryId eq articleInfo.categoryId}" selected ></option>
                           <option value="" th:each="obj:${categories}" th:value="${obj.categoryId}" th:text="${obj.name}"
                                  th:if="${obj.categoryId !=  articleInfo.categoryId}"   ></option>
                       </select>
                   </div>
               </div>
               <div class="layui-inline">
                   <!--<label class="layui-form-label">验证邮箱</label>-->
                   <div class="layui-input-inline" style="width: 500px ">
                       <input type="text" style="border: 1px solid red; " class="layui-input" id="title" th:value="${articleInfo.title}"  name="title"  placeholder="请输入文章标题">
                   </div>
               </div>
               <div class="layui-inline">
                   <input type="button" class="layui-btn" id="saveBtn" value="更新">
               </div>
           </div>
       </div>
<!--编辑器-->
<div id="editormd">
    <textarea style="display:none;" th:text="${articleInfo.content}"></textarea>
</div>
<!--标签选择-->

    <textarea name="content" style="display: none;"></textarea>
    <div class="layui-form-item"   >
        <label class="layui-form-label" style="font-size: 18px; color: #FF00FF;">标签：</label>
        <!--循环比较哪个标签被选中-->
        <input  type="checkbox" name="tagIds" lay-skin="primary"  th:value="${obj.tagId}"  th:title="${obj.name}"  th:each="obj:${tags}">
    </div>

</form>
<script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>

<script src="../../../static/third/editormd/editormd.min.js" th:src="@{/third/editormd/editormd.min.js}"></script>
<script src="../../../static/third/layui/layui.js" th:src="@{/third/layui/layui.js}"></script>
<script th:inline="javascript">

    //》》》》》》》》》》》》》》》》》》 处理标签选中问题i
        let tags = [[${articleInfo.tags}]];
        // alert(tags);
        $('input[name=tagIds]').each(function () {
            // thymeleaf 对于复杂的循环嵌套判断加属性不好解决，使用js解决选中标签问题。
            for(let i = 0 ; i < tags.length; i ++){
                // alert('当前ID'+ $(this).val())
                // alert('被选中的ID' + tags[i].tagId)
                if($(this).val() == tags[i].tagId){
                    $(this).attr('checked','');
                }
            }
        })
    //《《《《《《《《《《《《《《《《《《
</script>
<script type="text/javascript">
    $(function() {
        // $('form').hide();



        let editor = editormd("editormd", {
            width: "99%",
            height:750,
            theme : "dark",
            previewTheme : "dark",
            editorTheme : "pastel-on-dark",
            // markdown : md,
            codeFold : true,
            path:"/third/editormd/lib/",
            // path : "../../../static/third/edtiormd/lib/", // Autoload modules mode, codemirror, marked... dependents libs path
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                // /editormd.min.js
        });
        $('#saveBtn').click(
            function () {
                //获取markdown
                let md = editor.getMarkdown();
                $('form textarea[name=content]').html(md);
                // 表单验证

                let title = $('input[name=title]').val();
                if(title == ''){
                    layer.alert('请填写标题');
                    return;
                }
                let categoryId = $('select[name=categoryId]').val();
                if(categoryId == ''){
                    layer.alert('请选择分类');
                    return;
                }
                $('form').submit();
            }
        )
    });

    layui.use('form', function(){
        let form = layui.form;

    });
</script>
</body>
</html>